<script setup>
  import { ElMessage } from 'element-plus'
  import { ref, computed } from 'vue'
  import { login, register } from '@/api'
  import { useUserStore } from '@/store'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const mode = ref('login') // 'login' | 'register'
  const submitLoading = ref(false)

  const text = computed(() => {
    return mode.value === 'login'
      ? {
          label: '登录',
          tip: '还没有账号？',
          switchTip: '去注册',
        }
      : {
          label: '注册',
          tip: '已有账号？',
          switchTip: '去登录',
        }
  })

  const formData = ref({})

  const resetFormData = () => {
    formData.value = {
      username: '',
      password: '',
      confirmPassword: '',
    }
  }
  resetFormData()

  const onSubmit = () => {
    submitLoading.value = true
    new Promise((res, rej) => {
      const { username, password, confirmPassword } = formData.value
      if (!username || !password) {
        return rej('用户名或密码不能为空')
      }

      if (mode.value === 'register' && password !== confirmPassword) {
        return rej('两次密码输入不一致')
      }

      res()
    })
      .then(() => {
        const request = mode.value === 'login' ? login : register
        return request(formData.value)
      })
      .then(res => {
        ElMessage.success(res.msg)
        const userStore = useUserStore()
        if (mode.value === 'login') {
          userStore.login(res.data.token)
          router.push('/')
        } else {
          mode.value = 'login'
        }
        resetFormData()
      })
      .catch(ElMessage.error)
      .finally(() => {
        submitLoading.value = false
      })
  }

  const onSwitchMode = () => {
    if (submitLoading.value) return

    mode.value = mode.value === 'login' ? 'register' : 'login'
    resetFormData()
  }
</script>

<template>
  <div class="login-page flex-center">
    <div class="box-wrapper">
      <h1 class="title">{{ text.label }}</h1>
      <el-input
        class="input-item"
        v-model="formData.username"
        prefix-icon="User"
        placeholder="请输入用户名"
        clearable
      />
      <el-input
        class="input-item"
        type="password"
        v-model="formData.password"
        prefix-icon="Lock"
        placeholder="请输入密码"
        clearable
        show-password
      />
      <el-input
        v-if="mode === 'register'"
        class="input-item"
        type="password"
        prefix-icon="Lock"
        v-model="formData.confirmPassword"
        placeholder="请确认密码"
        clearable
        show-password
      />
      <div class="footer flex-col">
        <el-button type="primary" @click="onSubmit" style="width: 100%">
          {{ text.label }}
        </el-button>
        <div class="change-mode" @click="onSwitchMode">
          <span>{{ text.tip }}</span>
          <span class="switch-text">{{ text.switchTip }}<span class="arrow">></span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
  .login-page {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .box-wrapper {
    position: relative;
    z-index: 1;
    width: 400px;
    border: 2px solid var(--primary-500);
    border-radius: var(--round-2);
    padding: 30px;
    backdrop-filter: blur(10px);

    & > *:not(:first-child) {
      margin-top: 20px;
    }
  }

  .title {
    text-align: center;
    font-size: 36px;
    letter-spacing: 4px;
  }

  .input-item {
    width: 100%;
    border-radius: var(--round-2);
  }

  .footer {
    justify-content: flex-end;
  }

  .change-mode {
    text-align: right;
    margin-top: 8px;
    font-size: 14px;

    .switch-text {
      color: var(--primary-500);
      cursor: pointer;
    }

    .arrow {
      transition: all 0.3s ease-in-out;
      display: inline-block;
      width: 0;
      opacity: 0;
    }

    .switch-text:hover .arrow {
      width: 10px;
      opacity: 1;
    }
  }
</style>
